<template>
  <div class="jurisdiction">
    <el-table :data="tableData" border style="width: 100%" 
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      :row-style="{ 'height': '48px'}">
      <el-table-column fixed prop="number" label="编号" width="150" />
      <el-table-column prop="code" label="编码" width="150" />
      <el-table-column prop="name" label="姓名" width="150" />
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleClick(scope.row)"
          >编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="修改"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <!-- 九个多选框 -->
      <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        :default-expanded-keys="[]"
        :default-checked-keys="[1,2,3,4,5,6,7,8,9]"
        :props="defaultProps"
      />

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleClose()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      msg: '权限管理',
      labelPosition: 'right',
      dialogVisible: false, // 修改模块显示隐藏
      tableData: [],
      /*
       *
       */
      inputcode: '',
      /* 权限控制多选框 */
      data: [
        {
          id: 1,
          label: '基本信息管理',
          children: [
            {
              id: 10,
              label: '参保补贴设置'
            },
            {
              id: 11,
              label: '年度平均工资记录'
            },
            {
              id: 12,
              label: '基准补贴年限设置'
            }
          ]
        },
        {
          id: 2,
          label: '人员信息管理',
          children: [
            {
              id: 15,
              label: '项目信息导入'
            },
            {
              id: 16,
              label: '人员信息管理'
            },
            {
              id: 17,
              label: '人员信息申请'
            },
            {
              id: 18,
              label: '人员信息更改'
            },
            {
              id: 19,
              label: '银行卡号批量更新'
            }
          ]
        },
        {
          id: 3,
          label: '账户管理',
          children: [
            {
              id: 20,
              label: '账户信息管理'
            },
            {
              id: 21,
              label: '账户支出申请'
            },
            {
              id: 22,
              label: '账户信息管理（其他）'
            },
            {
              id: 23,
              label: '账户信息管理（职保）'
            },
            {
              id: 24,
              label: '账户信息管理（城居保）'
            }
          ]
        },
        {
          id: 4,
          label: '支出管理',
          children: [
            {
              id: 25,
              label: '账户支出登记（职保）'
            },
            {
              id: 26,
              label: '账户支出申请'
            },
            {
              id: 27,
              label: '账户结算登记（职保）'
            },
            {
              id: 28,
              label: '账户结算申请（职保）'
            },
            {
              id: 29,
              label: '账户结算申请（城居保）'
            }
          ]
        },
        {
          id: 5,
          label: '业务审核',
          children: [
            {
              id: 30,
              label: '人员信息审核'
            },
            {
              id: 31,
              label: '账户计息审核'
            },
            {
              id: 32,
              label: '账户支出审核'
            },
            {
              id: 33,
              label: '账户结算审核'
            },
            {
              id: 34,
              label: '账户调整审核'
            },
            {
              id: 35,
              label: '人员信息更改审核'
            }
          ]
        },
        {
          id: 6,
          label: '制单管理',
          children: [
            {
              id: 36,
              label: '账户补贴制单（其他）'
            },
            {
              id: 37,
              label: '账户补贴制单（职保）'
            },
            {
              id: 38,
              label: '账户补贴制单（城居保）'
            },
            {
              id: 39,
              label: '账户利息制单'
            },
            {
              id: 40,
              label: '账户支出制单'
            },
            {
              id: 41,
              label: '账户结算制单（职保）'
            },
            {
              id: 42,
              label: '账户结算制单（城居保）'
            },
            {
              id: 43,
              label: '账户调整制单'
            }
          ]
        },
        {
          id: 7,
          label: '财务管理',
          children: [
            {
              id: 44,
              label: '账户补贴到账（其他）'
            },
            {
              id: 45,
              label: '账户补贴到账（职保）'
            },
            {
              id: 46,
              label: '账户补贴到账（城居保）'
            },
            {
              id: 47,
              label: '账户利息到账'
            },
            {
              id: 48,
              label: '帐户支出到账'
            },
            {
              id: 49,
              label: '账户结算到账（职保）'
            },
            {
              id: 50,
              label: '账户结算到账（城居保）'
            },
            {
              id: 51,
              label: '账户核算'
            },
            {
              id: 52,
              label: '账户调整到账'
            }
          ]
        },
        {
          id: 8,
          label: '查询统计',
          children: [
            {
              id: 53,
              label: '征地批文查询'
            },
            {
              id: 54,
              label: '征地人员统计'
            },
            {
              id: 55,
              label: '征地账户查询'
            },
            {
              id: 56,
              label: '操作历史查询'
            },
            {
              id: 57,
              label: '支出制单查询'
            }
          ]
        },
        {
          id: 9,
          label: '系统管理',
          children: [
            {
              id: 58,
              label: '操作管理'
            },
            {
              id: 59,
              label: '权限管理'
            },
            {
              id: 60,
              label: '性别'
            },
            {
              id: 61,
              label: '乡设置'
            },
            {
              id: 62,
              label: '村设置'
            },
            {
              id: 63,
              label: '角色设置'
            },
            {
              id: 64,
              label: '角色权限'
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleClick(row) {
      console.log(row)
      this.dialogVisible = true
    },
    handleClose() {
      this.$confirm('确认修改？')
        .then((_) => {
          // done();
          this.dialogVisible = false
        })
        .catch((_) => {})
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: 'region' }])
      }
      if (node.level > 1) return resolve([])

      setTimeout(() => {
        const data = [
          {
            name: 'leaf',
            leaf: true
          },
          {
            name: 'zone'
          }
        ]
        resolve(data)
      }, 500)
    }
  }
}
</script>

<style scoped lang="scss">
.jurisdiction {
  padding: 30px;
  .el-table {
    max-width: 601px;
  }
}
</style>
